<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div class="container clearflx" style="padding:80px 0 20px;">
      <ul class="clearflx">
        <!-- 表格头 -->
        <li class="lists" style="font-weight:700;">
          <div class="lists_name">
            <span class="lists_name_text">展会名称</span>
          </div>
          <div class="lists_area">
            <span class="lists_area_text">会展场馆</span>
          </div>
          <div class="lists_city">
            <span class="lists_city_text">城市</span>
          </div>
          <div class="lists_startTime">
            <span class="lists_startTime_text">开展时间</span>
          </div>
          <div class="lists_endTime">
            <span class="lists_endTime_text">闭展时间</span>
          </div>
        </li>
        <!-- 表格内容 -->
        <router-link to='/' v-for="(item,index) in data" :key="index">
          <li class="lists fontSize">
            <div class="lists_name">
              <span class="lists_name_type gray">【{{item.type}}】</span>
              <span class="lists_name_title">{{item.title}}</span>
            </div>
            <div class="lists_area">
              <span class="lists_area_text1 gray">{{item.area}}</span>
            </div>
            <div class="lists_city">
              <span class="lists_city_text gray">{{item.city}}</span>
            </div>
            <div class="lists_startTime">
              <span class="lists_startTime_text red">{{item.startTime}}</span>
            </div>
            <div class="lists_endTime">
              <span class="lists_endTime_text red">{{item.endTime}}</span>
            </div>
          </li>
        </router-link>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      data:[
        {
          type:'文化教育',
          title:'2018首届海南国际香业展会',
          area:'海南国际会展中心',
          city:'海南',
          startTime:'2018-07-31',
          endTime:'2018-08-31',
        },
        {
          type:'建材五金',
          title:'2018年上海墙布壁画展第二十六届上海壁纸墙布展',
          area:'上海新国际博览中心',
          city:'上海',
          startTime:'2018-08-10',
          endTime:'2018-08-12',
        },
        {
          type:'食品饮料',
          title:'2018亚洲（北京）国际食品饮料暨进口食品博览会',
          area:'上海新国际博览中心',
          city:'上海',
          startTime:'2018-08-15',
          endTime:'2018-08-17',
        },
        {
          type:'文化教育',
          title:'2018首届海南国际香业展会',
          area:'海南国际会展中心',
          city:'海南',
          startTime:'2018-07-31',
          endTime:'2018-08-31',
        },
        {
          type:'建材五金',
          title:'2018年上海墙布壁画展第二十六届上海壁纸墙布展',
          area:'上海新国际博览中心',
          city:'上海',
          startTime:'2018-08-10',
          endTime:'2018-08-12',
        },
        {
          type:'食品饮料',
          title:'2018亚洲（北京）国际食品饮料暨进口食品博览会',
          area:'上海新国际博览中心',
          city:'上海',
          startTime:'2018-08-15',
          endTime:'2018-08-17',
        },
        {
          type:'文化教育',
          title:'2018首届海南国际香业展会',
          area:'海南国际会展中心',
          city:'海南',
          startTime:'2018-07-31',
          endTime:'2018-08-31',
        },
        {
          type:'建材五金',
          title:'2018年上海墙布壁画展第二十六届上海壁纸墙布展',
          area:'上海新国际博览中心',
          city:'上海',
          startTime:'2018-08-10',
          endTime:'2018-08-12',
        },
        {
          type:'食品饮料',
          title:'2018亚洲（北京）国际食品饮料暨进口食品博览会',
          area:'上海新国际博览中心',
          city:'上海',
          startTime:'2018-08-15',
          endTime:'2018-08-17',
        },
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.gray {
  color: #848484;
}
.red {
  color: #c81622;
  margin-left: 10px;
}
.fontSize {
  font-size: 15px;
  // height: 40px !important;
  // line-height: 40px !important;
}
a{
  text-decoration: none;
  display: block;
}
.lists {
  display: flex;
  height: 40px;
  line-height: 40px;
  text-align: left;
  border-bottom: 1px solid #bfbdbf;
  color: #040000;
  .lists_name {
    flex: 5;
    .lists_name_text {
      margin-left: 90px;
    }
    .lists_name_type {
      font-size: 12px;
      margin-left: 32px;
    }
    .lists_name_title {
      color: #040000;
    }
  }
  .lists_area {
    flex: 2;
    .lists_area_text {
      margin-left: 21px;
    }
    .lists_area_text1 {
      margin-left: 8px;
    }
  }
  .lists_city {
    flex: 1.5;
    text-align: center;
  }
  .lists_startTime {
    flex: 1.5;
    .lists_startTime_text {
      margin-left: 21px;
    }
  }
  .lists_endTime {
    flex: 1.5;
    .lists_endTime_text {
      margin-left: 21px;
    }
  }
}
</style>
